<template>
<div class="page-container">
  <div class="toolbar">
	<el-form :inline="true" :model="dataForm" :size="size" ref="dataForm">

    <el-row class="search-input">
      <el-form-item label="平台登录图片：" prop="platformLoginImage">
        <el-upload
          :action="imgUpload"
          list-type="picture-card"
          :on-success="PlatformLoginPicture"
          :on-exceed="handleExceed1"
          :before-upload="beforeUpload"
          v-model="dataForm.platformLoginImage"
          accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
          :on-remove="handlePicRemove"
          :limit="picLimit"
          style="float:left"
          ref="pic_upload"
          :file-list="picList1"
          >
          <i class="el-icon-plus"></i>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5M</div>
        </el-upload>
      </el-form-item>
    </el-row>
    <el-form-item>
      <el-button type="primary" @click="add()">保存</el-button>
    </el-form-item>
    <el-row class="search-input">
      <el-form-item label="商家登录图片：" prop="merchantLoginImage">
        <el-upload
          :action="imgUpload"
          :on-success="MerchantLoginPicture"
          :on-exceed="handleExceed2"
          list-type="picture-card"
          v-model="dataForm.merchantLoginImage"
          accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
          :on-remove="handleCertificateRemove"
          :limit="picLimit"
          style="float:left"
          ref="certificate_upload"
          :file-list="picList2"
          >
          <i class="el-icon-plus"></i>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5M</div>
        </el-upload>
      </el-form-item>
    </el-row>
    <el-form-item>
      <el-button type="primary" @click="add()">保存</el-button>
    </el-form-item>
    <el-row class="search-input">
      <el-form-item label="PC商城登录图片：" prop="pcLoginImage">
        <el-upload
          :action="imgUpload"
          :on-success="PcMallPoginPicture"
          :on-exceed="handleExceed3"
          list-type="picture-card"
          v-model="dataForm.pcLoginImage"
          accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
          :on-remove="handleCertificateRemove"
          :limit="picLimit"
          style="float:left"
          ref="certificate_upload"
          :file-list="picList3"
          >
          <i class="el-icon-plus"></i>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5M</div>
        </el-upload>
      </el-form-item>
    </el-row>
    <el-form-item>
      <el-button type="primary" @click="add()">保存</el-button>
    </el-form-item>
    <el-row class="search-input">
      <el-form-item label="H5商城登录图片：" prop="hwLoginImage">
        <el-upload
          :action="imgUpload"
          :on-success="HMallPoginPicture"
          :on-exceed="handleExceed4"
          list-type="picture-card"
          v-model="dataForm.hwLoginImage"
          accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
          :on-remove="handleCertificateRemove"
          :limit="picLimit"
          style="float:left"
          ref="certificate_upload"
          :file-list="picList4"
          >
          <i class="el-icon-plus"></i>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5M</div>
        </el-upload>
      </el-form-item>
    </el-row>
    <el-form-item>
      <el-button type="primary" @click="add()">保存</el-button>
    </el-form-item>
    <el-row class="search-input">
    <el-form-item label="Andriod商城登录图片：" prop="androidLoginImage">
      <el-upload
        :action="imgUpload"
        :on-success="AndriodMallPoginPicture"
        :on-exceed="handleExceed5"
        list-type="picture-card"
        v-model="dataForm.androidLoginImage"
        accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
        :on-remove="handleCertificateRemove"
        :limit="picLimit"
        style="float:left"
        ref="certificate_upload"
        :file-list="picList5"
        >
        <i class="el-icon-plus"></i>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5M</div>
      </el-upload>
    </el-form-item>
  </el-row>
    <el-form-item>
      <el-button type="primary" @click="add()">保存</el-button>
    </el-form-item>
  <el-row class="search-input">
    <el-form-item label="Ios商城登录图片：" prop="iosLoginImage">
      <el-upload
        :action="imgUpload"
        :on-success="IosMallPoginPicture"
        :on-exceed="handleExceed6"
        list-type="picture-card"
        v-model="dataForm.iosLoginImage"
        accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
        :on-remove="handleCertificateRemove"
        :limit="picLimit"
        style="float:left"
        ref="certificate_upload"
        :file-list="picList6"
        >
        <i class="el-icon-plus"></i>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5M</div>
      </el-upload>
    </el-form-item>
  </el-row>
    <el-form-item>
      <el-button type="primary" @click="add()">保存</el-button>
    </el-form-item>
  </el-form>
  </div>
</div>
</template>

<script>
//一.导包区


//二.数据输出区
export default {
    data() {
        return {
          size: "small",
          dataForm: {
            platformLoginImage:"",
            merchantLoginImage:"",
            pcLoginImage:"",
            hwLoginImage:"",
            androidLoginImage:"",
            iosLoginImage:""
          },
          imgUpload: this.utils.imgUploadUrl,
          picList1: [],
          picList2: [],
          picList3: [],
          picList4: [],
          picList5: [],
          picList6: [],
          picLimit: 1,

        }
    },
    methods: {

      //平台登录图片上传
      PlatformLoginPicture: function (res, file) {
        if (res.code === "0000") {
          this.dataForm.platformLoginImage = res.data.imgUrl;
          let imgUrl = {};
          imgUrl.url = res.data.imgUrl;
          this.picList1.push(imgUrl);
        }
      },
      //商城登录图片上传
      MerchantLoginPicture: function (res, file) {
        if (res.code === "0000") {
          this.dataForm.MerchantLoginPicture = res.data.imgUrl;
          let imgUrl = {};
          imgUrl.url = res.data.imgUrl;
          this.picList2.push(imgUrl);
        }
      },
      //Pc商城登录图片上传
      PcMallPoginPicture: function (res, file) {
        if (res.code === "0000") {
          this.dataForm.PcMallPoginPicture = res.data.imgUrl;
          let imgUrl = {};
          imgUrl.url = res.data.imgUrl;
          this.picList3.push(imgUrl);
        }
      },
      //H5商城登录图片上传
      HMallPoginPicture: function (res, file) {
        if (res.code === "0000") {
          this.dataForm.HMallPoginPicture = res.data.imgUrl;
          let imgUrl = {};
          imgUrl.url = res.data.imgUrl;
          this.picList4.push(imgUrl);
        }
      },
      //Andriod商城登录图片上传
      AndriodMallPoginPicture: function (res, file) {
        if (res.code === "0000") {
          this.dataForm.AndriodMallPoginPicture = res.data.imgUrl;
          let imgUrl = {};
          imgUrl.url = res.data.imgUrl;
          this.picList5.push(imgUrl);
        }
      },
      //Ios商城登录图片上传
      IosMallPoginPicture: function (res, file) {
        if (res.code === "0000") {
          this.dataForm.IosMallPoginPicture = res.data.imgUrl;
          let imgUrl = {};
          imgUrl.url = res.data.imgUrl;
          this.picList6.push(imgUrl);
        }
      },
      //文件上传数量限制
      handleExceed1: function () {
        this.$alert("最多上传一个", "警告", {
          confirmButtonText: "确定"
        });
      },
      //文件上传数量限制
      handleExceed2: function () {
        this.$alert("最多上传一个", "警告", {
          confirmButtonText: "确定"
        });
      },
      //文件上传数量限制
      beforeUpload: function (file) {

        let this_ = this;
        if (file.size > 100 * 1024 * 1024) {
          this.$message({
            message: '上传文件大小不能超过 10MB!',
            type: 'warning'
          });
          return false;
        }
      },
      //文件上传数量限制
      handleExceed3: function () {
        this.$alert("最多上传一个", "警告", {
          confirmButtonText: "确定"
        });
      },
      //文件上传数量限制
      handleExceed4: function () {
        this.$alert("最多上传一个", "警告", {
          confirmButtonText: "确定"
        });
      },
      //文件上传数量限制
      handleExceed5: function () {
        this.$alert("最多上传一个", "警告", {
          confirmButtonText: "确定"
        });
      },
      //文件上传数量限制
      handleExceed6: function () {
        this.$alert("最多上传一个", "警告", {
          confirmButtonText: "确定"
        });
      },
      //文件移除
      handlePicRemove(file, picList) {
        if (picList && picList.length === 0) {
          this.dataForm.pic = "";
        }
        this.picList = picList
      },
      //图片长传
      add(){
        let this_=this;
        this.utils.request.saveSysLoginImage(this_.dataForm, function(res) {
          if (res.code === "0000") {
            this_.$message({
              message: "操作成功",
              type: "success"
            });
          } else {
            this_.$message({
              message: "操作失败, " + res.msg,
              type: "error"
            });
          }
        });
      }
    },
}
</script>

<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
        .el-form-item__label {
            height: 32px;
            line-height: 32px;
        }

        .el-form-item__content {
            height: 32px;
            line-height: 32px;
            width: 150px;
        }

        .el-input--mini .el-input__inner {
            height: 32px;
            line-height: 32px;
        }

        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
            width: 150px;
        }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
        width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;

        .left-area {
            float: left;
            width: 50%;
            text-align: left;

            button {
                margin-right: 15px;
                border-radius: 5px;
            }
        }

        .right-area {
            float: right;
            width: 50%;
            text-align: right;
        }
    }

    /* 表格部分样式 */
    .table-wrap {
        width: 100%;
        max-height: 600px;
        margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
        text-align: center !important;
    }
}
</style>
